$root-font-size: 16px
$gray-color: #ececec
$yellow-color: #d4b172

*
  margin: 0
  padding: 0
  user-select: none

html,body
  overflow: hidden
  height: 100%
body
  background-color: gray

#app
  width: 100vw
  height: 100vh
  background-color: #fff

.date-picker-wrap
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  background-color: #fff
  transform: translateX(100vw) translateZ(0)
  transition: .5s
  &.show
    transform: translateX(0vw) translateZ(0)

.date-picker

  z-index: 999
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  display: flex
  flex-direction: column
  color: #222
  font-size: $root-font-size

.dp-header
  .dp-labels
    display: flex
    justify-content: space-around
    margin: 0
    background-color: $gray-color
    li
      color: #999
      font-size: 14px
      text-align: center
      line-height: 35px
      &.sunday,
      &.saturday
        color: #d4b172

.dp-container
  flex: 1;
  overflow-y: auto;

.dp-calendar-item 
  header
    padding-top: 0.8rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after,
    &::before
      content: ''
      width: 49px
      height: 1px
      background-color: #ccc
      transform: scaleY(.5)
  h4
    padding: 0 0.4rem;
    color: #333;
    font-weight: normal;
    text-align: center;
    font-size: 18px;
    line-height: 3.25;
    letter-spacing: 0;
  ul
    display: flex
    width: 100%
    flex-wrap: wrap;
    list-style: none;
    li
      flex: 1 1 14.285714%
      min-width: 14.285714%
      max-width: 14.285714%
      line-height: 14.285714vw
      margin-bottom: 1rem
      text-align: center

      @each $n in 0,1,2,3,4,5,6
        $saturday: 8 - $n
        $sunday: 9 - $n
        &.empty-#{$n}
          counter-reset: date
          flex: $n $n 14.285714% * $n
          min-width: 14.285714% * $n
          max-width: 100%
          ~ :nth-child(7n + #{$saturday}),
          ~ :nth-child(7n + #{$sunday})
            // background-color: fade-in(#d4b172, .5)
            color: #d4b172

        &:not(:first-child):before
          content: counter(date)
          counter-increment: date

    li.today:before
      content: '今天' !important
    li.disabled:before
      color: #ccc !important
    li.selected
      border-radius: 50%
      background-color: rgba(92,144,22,.36)
      color: #fff
